<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="俱乐部详情" :leftIconColor="'#fff'" :titleColor="'#fff'"
        :textAlign="'center'" />
      <scroll-view scroll-y class="scroll-view-content">
        <!-- 顶部背景与俱乐部信息 -->
        <view class="header-bg">
          <!-- <image class="bg-img" src="https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg" mode="aspectFill" /> -->
          <view class="header-content">
            <image class="club-logo" :src="detailhonor.logo" />
            <view class="club-info">
              <view class="club-name">{{detailhonor.name}}</view>
              <view class="club-city">{{detailhonor.city}}</view>

            </view>
            <view class="club-meta">
              <view>地址：{{detailhonor.address}}</view>
              <view>领队：{{detailhonor.leader_name}}</view>
            </view>
            <view class="score-box">
              <view class="score">{{ detailhonor.points }}</view>
              <view class="score-label">积分</view>
            </view>
          </view>
          <view class="qrcode-btn">
            <image :src="imgUrl + 'location2@3x.png'" class="qrcode-icon" />
          </view>
        </view>

        <view class="tabContent">
          <!-- Tab栏与奖牌统计 -->
          <view class="tab-bar">
            <view v-for="(tab, idx) in tabs" :key="tab" :class="['tab', { active: activeTab === idx }]"
              @click="activeTab = idx">{{ tab }}</view>

          </view>
          <view class="medal-counts" v-if="activeTab === 0">
            <view class="display-flex">
              <image :src="imgUrl + 'goldMedal@2x.png'" class="medal-icon" />
              <text class="medal-num">{{ medals.gold }}</text>
            </view>
            <view class="display-flex">
              <image :src="imgUrl + 'silverMedal@2x.png'" class="medal-icon" />
              <text class="medal-num">{{ medals.silver }}</text>
            </view>
            <view class="display-flex mr-auto">
              <image :src="imgUrl + 'bronzeMedal@2x.png'" class="medal-icon" />
              <text class="medal-num">{{ medals.bronze }}</text>
            </view>
            <view class="award-label mr-10">奖牌：{{ medals.total }}</view>
          </view>
          <!-- 荣誉列表 -->
          <view class="honor-list" v-if="activeTab === 0">
            <view v-for="(item, idx) in honorList" :key="idx" class="honor-item">
              <image :src="item.avatar" class="avatar" />
              <view class="honor-info">
                <view class="honor-row">
                  <view class="flex-grow1">
                    <view class="honor-name mt-mb-10">{{ item.name }}</view>
                    <view class="honor-match mt-mb-10">{{ item.match }}</view>
                  </view>
                  <view class="flex-grow1 text-align-center">
                    <view class="honor-name mt-mb-10">
                      <text class="honor-group">{{ item.group }}</text>
                      <text class="honor-event">{{ item.event }}</text>
                    </view>
                    <view class="honor-date mt-mb-10">{{ item.date }}</view>
                    <!-- <view class="flex-grow1">
                      <text class="honor-group">{{ item.group }}</text>
                      <text class="honor-event">{{ item.event }}</text>
                    </view>
                    <view class="honor-date mt-mb-10">{{ item.date }}</view> -->
                  </view>
                  <view class="honor-row">
                    <view class="flex-grow1  mt-mb-10 display-flex">
                      <text class="honor-rank">{{ item.rank }}</text>
                      <image :src="item.rankIcon" class="rank-icon" />
                    </view>
                  </view>
                </view>
                <!-- <view class="honor-row">
                  <view class="honor-name flex-grow1">{{ item.name }}</view>
                  <view class="flex-grow1">
                    <text class="honor-group">{{ item.group }}</text>
                    <text class="honor-event">{{ item.event }}</text>
                  </view>
                  <view class="flex-grow1">
                    <text class="honor-rank">{{ item.rank }}</text>
                    <image :src="item.rankIcon" class="rank-icon" />
                  </view>
                </view> -->
                <!-- <view class="honor-meta">
                  <view class="honor-match flex-grow1">{{ item.match }}</view>
                  <view class="honor-date flex-grow1">{{ item.date }}</view>
                  <view class="honor-date flex-grow1" style="visibility: hidden;">zahnwei</view>
                </view> -->
              </view>
            </view>
          </view>
          <view class="club-dynamic-desc" v-if="activeTab === 1">
            <view class="desc-card">
              <view class="desc-text" :class="{ collapsed: !expanded }">
                <!-- <text  :style="{height: collapsed ? '10rpx' : 'auto' }"> -->
                {{ desc }}
                <!-- </text> -->
              </view>
              <view class="expand-btn" @click="toggleExpand">
                <text>{{ expanded ? '收起' : '展开' }}</text>
                <image :class="{ rotated: expanded }" :src="imgUrl + 'arrow-down@2x.png'" class="expand-icon" />
              </view>
            </view>
          </view>
          <view class="club-match-list" v-if="activeTab === 2">
            <view v-for="(item, idx) in matchList" :key="idx" class="match-card">
              <image class="match-img" :src="item.img" mode="aspectFill" />
              <view class="match-info">
                <view class="match-title">{{ item.title }}</view>
                <view class="match-time">活动时间：{{ item.time }}</view>
                <view class="match-time">截止时间：{{ item.deadline }}</view>
              </view>
            </view>
          </view>
          <!-- 其他tab可自定义内容 -->
        </view>


      </scroll-view>

    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  import { useRequest } from '@/api';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_CLUB_DETAIL_HONOR_POST, API_CLUB_DETAIL_DYNAMIC_POST, API_CLUB_DETAIL_PARTICIPATE_POST } = useRequest()
  const score = 29482
  const tabs = ['荣誉', '动态', '参赛']
  const detailhonor = ref({})//荣誉
  const detaildynamic = ref({})//动态
  const detailparticipate = ref({})//参赛
  const activeTab = ref(0)
  const medals = {
    gold: 49,
    silver: 30,
    bronze: 22,
    total: 112
  }
  const honorList = [
    {
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      name: '李思雨',
      group: 'U13男子组',
      event: '60m',
      rank: '冠军',
      rankIcon: imgUrl + 'goldMedal.png',
      match: '国家奥体杯',
      date: '2025.12.12'
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
      name: '黄巍',
      group: 'U13男子组',
      event: '60m',
      rank: '季军',
      rankIcon: imgUrl + 'bronzeMedal.png',
      match: '昆明站',
      date: '2025.12.12'
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/34.jpg',
      name: '张三',
      group: 'U13男子组',
      event: '60m',
      rank: '亚军',
      rankIcon: imgUrl + 'silverMedal.png',
      match: '国家奥体杯',
      date: '2025.12.12'
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/35.jpg',
      name: '李玉',
      group: 'U13男子组',
      event: '60m',
      rank: '冠军',
      rankIcon: imgUrl + 'goldMedal.png',
      match: '昆明站',
      date: '2025.12.12'
    },
    {
      avatar: 'https://randomuser.me/api/portraits/men/36.jpg',
      name: '王志明',
      group: 'U13男子组',
      event: '60m',
      rank: '冠军',
      rankIcon: imgUrl + 'goldMedal.png',
      match: '西安站',
      date: '2025.12.12'
    }
  ]
  const expanded = ref(false)
  const desc = ref(
    '草源体育俱乐部坐落于风景秀丽、交通便利的，拥有面积达[X]平方米的现代化运动场地和设施。场地内铺设了国际标准的专业运动地板，配备了先进的照明系统草源体育俱乐部坐落于风景秀丽、交通便利的，拥有面积达[X]平方米的现代化运动场地和设施。场地内铺设了国际标准的专业运动地板，配备了先进的照明系统'
  )
  const toggleExpand = () => {
    expanded.value = !expanded.value
  }
  const matchList = [
  {
    img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
    title: '亚太地区田径教练培训班·郑州站',
    time: '2025.10.12 ～ 12.12',
    deadline: '2025.12.12 12:00:00'
  },
  {
    img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
    title: '亚太地区田径教练培训班·郑州站',
    time: '2025.10.12 ～ 12.12',
    deadline: '2025.12.12 12:00:00'
  },
  {
    img: 'https://img1.imgtp.com/2023/09/13/4QwQv1Qe.jpg',
    title: '亚太地区田径教练培训班·郑州站',
    time: '2025.10.12 ～ 12.12',
    deadline: '2025.12.12 12:00:00'
  }
]
onShow(() => {
  const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面
    console.log('currentPage', currentPage);

    const options = currentPage.options; // 获取当前页面的参数
    const { id } = options;
    if(id){
      getClubDetail(id);//获取俱乐部详情
    }
})
const getClubDetail = async (id) => {
  let params = {
    id
    }
    detailhonor.value = {}
    try {

      const res = await API_CLUB_DETAIL_HONOR_POST(params)
      console.log('getClubDetailHonor', res)

      if (res.code === 1) {
        if (res.data.length > 0) {
          detailhonor.value = res.data;
        } else {
          detailhonor.value = [];
        }
        console.log('detailhonor', detailhonor.value);
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
        console.log('detailhonor', detailhonor.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
}
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
</style>